<template>
  <div class="container  containerBetween">
    <div class="logo" >
      <img
        src="@/assets/Assets/logo.png"
        alt="logo"
        class="img"
        @click="gotoRestaurant"
      >
    </div>
    <div
      class="icon"

    >
      <img
        src="@/assets/Assets/profile-icon.png"
        alt=""
        class="img"
        @click.stop="showUnflod"

      >
      <div
        v-if="Unflod"
        class="user-unflod"
      >
        <UserUnflod />
      </div>
    </div>
  </div>
</template>

<script>
import UserUnflod from '@/components/header/UserUnflod.vue';
import { mapActions, mapState } from 'vuex';

export default {
  components: {
    UserUnflod,
  },
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      Unflod: (state) => state.userUnflod.unflod,
    }),
  },
  // mounted() {
  //   this.$on('transUnfo', () => {
  //     console.log('in');
  //   });
  // },
  methods: {
    ...mapActions([
      'showUserUnflod',
      'hideUserUnflod',
    ]),
    showUnflod() {
      this.showUserUnflod();
      // // this.$nextTick(() => {

      // });
    },
    // transUnfoAAA(v) {
    //   if (this.Unflod) {
    //     console.log('refs==>', v);
    //     // if (this.$refs.UserUnflodPage !== undefined) {
    //     console.log(2222);
    //     document.addEventListener('click', (e) => {
    //       if (!v.contains(e.target)) {
    //         this.hideUserUnflod();
    //       }
    //     });
    //     // }
    //   } else {
    //     console.log(111);
    //   }
    // },
    gotoRestaurant() {
      if (this.$route.path !== '/restaurant') {
        this.$router.push('/restaurant');
      } else {
        window.location.reload(); // 重新加载页面
      }
    },
  },

};
</script>

<style lang="scss" scoped>

.img{
    width : 60px;
    height : 60px;
    cursor :pointer;
}
.icon{
  position : relative;
  display : flex;
  flex-direction : column;
  align-items : flex-end ;
}
.user-unflod{
  position : absolute;
  top : 70px;
  right : 30px;
  z-index : 1000;
  width : 220px;
  background-color : #ffffff;
  border-radius : 5px;
  box-shadow : 0 0 8px 0 ;
}
</style>
